<template>
    <div class="system">
      <div class="return" v-if="clienId" @click="back">
        <img class="backImg" src="@/assets/images/back.png" alt />
      </div>
      <div class="top">
        <div class="title">
          <i class="el-icon-collection-tag" />基本资料
        </div>
        <div style="text-align: right;">
  
  
        </div>
      </div>
      <!-- <el-form
        ref="detail"
        label-position="right"
        label-width="180px"
        :rules="rules"
        :model="detail"
        size="mini"
        class="formBox"
      > -->
      <el-form
        :rules="rules"
        :model="detail"
      >
      <el-descriptions class="margin-top" :column="4" border size="small">
        <el-descriptions-item>
          <template slot="label">发起门店</template>
          {{detail.initiator_shop}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">客户姓名</template>
          {{detail.initiator_customer}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">订单单号</template>
          {{detail.order_no}}
        </el-descriptions-item>
        
        <el-descriptions-item >
          <template slot="label">录单员姓名</template>
          {{detail.initiator_name}}
        </el-descriptions-item>

         <el-descriptions-item>
          <template slot="label">订单类型</template>
          <el-form-item  prop="order_type">
          <el-select v-model="detail.order_type"  placeholder="请选择订单类型">
            <el-option
              v-for="item in options.order_type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        </el-descriptions-item>


        <el-descriptions-item >
          <template slot="label">销售组织</template>
          {{detail.sales_name}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">结算组织</template>
          {{detail.sales_name}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">发货组织</template>
          {{detail.settlement_name}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">收/退款组织</template>
          {{detail.settlement_name}}
        </el-descriptions-item>
      
        <el-descriptions-item>
          <template slot="label">订单状态</template>
          <span v-if="detail.status == 0">待发起</span>
          <span v-if="detail.status == 1">待确认</span>
          <span v-if="detail.status == 2">已确认</span>
          <span v-if="detail.status == 3">已作废</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">转诊总额</template>
          {{detail.order_amount}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">赠金</template>
          {{detail.gift_amount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">本金</template>
          {{detail.pay_amount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">店转</template>
          {{detail.shop_transfer_amount}}
        </el-descriptions-item>
       
        <el-descriptions-item>
          <template slot="label">成交时间</template>
            <el-date-picker
                v-model="detail.deal_time"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">创建时间</template>
          {{detail.create_time?detail.create_time:'暂无'}}
        </el-descriptions-item>
     

      <el-descriptions-item >
          <template slot="label">退款人</template>
            {{detail.refunder}}
        </el-descriptions-item>
        <el-descriptions-item >
           <template slot="label">退款账号</template>
          {{detail.refund_account}}
        </el-descriptions-item>
  
      
        <el-descriptions-item>
          <template slot="label">订单描述</template>
          <el-input type="textarea" v-model="detail.description"></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
      <div class="top">
        <div class="title mt20">
          <i class="el-icon-collection-tag" />
          <span >转诊单资料详情</span>
        </div>
      </div>
      <!--列表-->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >
          <el-table-column label="* 业务类型" width="200">
                  <template scope="{ row, $index }">
                    <el-select   @change="(value) => handleChange(value,$index)" v-model="row.business_type" size="medium" placeholder="请选择"  >
                      <el-option
                        v-for="item in options.business_type"
                          size="mini"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="* 业务二级类型" width="200">
                  <template scope="{  $index }">
                    <el-select  :disabled="list[$index].business_type ==2 ?false:true"
                      v-model="list[$index].business_two_type" clearable  size="medium" placeholder="请选择" >
                      <el-option
                        v-for="item in options.business_two_type"
                          size="mini"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </template>
                </el-table-column>

                <el-table-column label="* 结算方式">
                  <template slot-scope="{ row }">
                    <el-select
                      v-model="row.refund_mode"
                      size="mini"
                      value-key="id"
                      placeholder="请选择收款方式"
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in options.refundMode"
                        :key="index"
                        :label="item.refund_mode_name"
                        :value="item.refund_mode"
                      />
                    </el-select>
                  </template>
                </el-table-column>
             
              <el-table-column label="本金"  prop="pay_price">   
                <template slot-scope="{ row }">
                    <el-input-number
                        v-model="row.pay_price"
                        :min="0.0"
                        :precision="2"
                        size="mini"
                    />
                </template>
              </el-table-column>
              <el-table-column label="赠金"  prop="gift_price">
                <template slot-scope="{ row }">
                    <el-input-number
                        v-model="row.gift_price"
                        :min="0.0"
                        :precision="2"
                        size="mini"
                    />
                </template>
              </el-table-column>
              <el-table-column label="店转"  prop="shop_transfer_price">
                <template slot-scope="{ row }">
                    <el-input-number
                        v-model="row.shop_transfer_price"
                        :min="0.0"
                        :precision="2"
                        size="mini"
                    />
                </template>
              </el-table-column>
          </el-table>
        
        </el-col>
      </el-row>
      <div class="btnBox" style>
          <el-button type="primary"  size="mini" class="mainBtn" @click="submitForm()">完成，提交</el-button>
        </div>
    </div>
  </template>
  
  <script>
  import { referralOrderDetail, referralOrderGoods,updateReferralOrder,refundMode } from "@/api/order";
  import { staffList } from "@/api/staff";
  class Detail {
   

    shop_id = ""; //店铺id
    uid = ""; //客户id
    sale_id = ""; //开单人id
    sale_name = ""; //开单人名称
    is_experience = "0"; // 是否体验
    experience_id = ""; // 体验人id
    experience_name = ""; // 体验人姓名
    is_outreach = "0"; // 是否外联
    outreahc_id = ""; // 外联人id
    outreahc_name = ""; // 外联人姓名
    is_introduction = "0"; // 是否转介绍
    introduction_id = ""; // 转介绍id
    introduction_name = ""; // 转介绍姓名
    order_type = ""; //订单类型
    project_type = ""; //项目类型
  }
  class Options {
    constructor() {
      this.uid = [];
      this.business_type = [
        { id: 1, name: "疤痕" },
        { id: 2, name: "项目" },
        { id: 3, name: "青春痘" },
        { id: 4, name: "护肤品" }
      ];
      this.business_two_type = [
        { id: 1, name: "身体项目" },
        { id: 2, name: "皮肤项目" },
      ];
      this.order_type = [
        { id: 1, name: "新单" },
        { id: 2, name: "补单" }
      ];
      
      this.outreahc_id = [];
      this.staff = [];
      this.refundMode = [];
      this.sales_policy = [];
      this.referral_shop_id = [];
    }
  }
  class Rules {
    sale_id = [{ required: true, message: "请选择开单人", trigger: "change" }];
    sales_organization = [
      { required: true, message: "请选择销售组织", trigger: "change" }
    ];
    settlement_organization = [
      { required: true, message: "请选择发货组织", trigger: "change" }
    ];
    business_type = [
      { required: true, message: "请选择业务类型", trigger: "change" }
    ];
    order_type = [
      { required: true, message: "请选择订单类型", trigger: "change" }
    ];
    refund_type = [
      { required: true, message: "请选择收款类型", trigger: "change" }
    ];

    deal_time = [
      { required: true, message: "请选择业务日期", trigger: "change" }
    ];
  }
  export default {
    name: "system",
    data() {
      return {
        order_id:0,
        options: new Options(), // 选项
        rules: new Rules(), // 表单校验
        system: {},
        remark: "",
        detail: [],
        list: [],
        type: "",
        clienId: "",
        types: "",
        noKing: "",
        isShowBusinessOneType:false, //是否显示一级分类
        isShowBusinessTwoType:false, //是否显示二级分类
        isShowProjectType : false, //是否显示项目分类
        isShowOrderClass  : false, //是否显示订单分类
        isShowRefundAccount :false, //是否显示退款账号
        isShowRefunder: false //是否显示退款人
      };
    },
    mounted() {
      this.order_id = this.$route.query.id;
      this.getDetail();
    },
    methods: {
        handleChange(value, index) {
            this.list[index].business_two_type ='';
        },

       // 获取详情
      getDetail() {
        referralOrderDetail({
          order_id: this.$route.query.id,
        }).then(res => {
          this.detail = res.data;
          this.detail.order_type = this.detail.order_type  == '新单'?1:2;
        });

        referralOrderGoods({
          order_id: this.$route.query.id,          
        }).then(res => {
          this.list = res.data;
        });

         // 收款方式列表-转诊单使用
        refundMode({ refundMode: 4 }).then(res => {
          this.options.refundMode = res.data.list;
        });
      },
      // 提示
      hint(type,text) {
        this.$confirm(`${text}，是否确定？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            if(type == 'del'){
              this.delOrder();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
    
      submitForm(){
     
        console.log(this.detail);
        if(this.detail.order_type!=1&&this.detail.order_type!=2)
        {
              this.$message({
                type: "warning",
                message: "数据填写错误"
              });
        }else{
          const loading = this.$loading({
            lock: true,
            text: "提交中，请稍后...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });

          updateReferralOrder({
            id:this.detail.id,
            order_type:this.detail.order_type,
            deal_time:this.detail.deal_time,
            description:this.detail.description,
            goodsList:this.list
          }).then(
            res => {
              loading.close();
              if(res.code==200)
              {
                this.$message({
                  type: "success",
                  message: res.msg
                });
                this.$router.back();
              }else{
                  this.$message({
                  type: "warning",
                  message: res.msg
                });
              }
            }).catch(err => {
           loading.close();
        });;
        }
      },
      // 返回
      back() {
        const query = {
          id: this.$route.query.clienId,
          customer_name: this.$route.query.detail.customer_name,
          detail:this.$route.query.detail,
          activeName: this.$route.query.types
        };
        this.$router.push({ name: "客户详情", query });
      }
    }
  };
  </script>
  
  <style lang='scss' scoped>
  .return {
    position: fixed;
    right: 20px;
    top: 71px;
    z-index: 999;
    .backImg {
      margin-right: 14px;
      width: 32px;
      height: 100%;
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .btnBox {
    width: 100%;
    margin-top: 20px;
    text-align: right;
  }
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: bold;
      font-size: 14px;
      line-height: 34px;
      color: #666;
    }
  }
  .formBox {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 25%;
    }
  }
  ::v-deep .el-descriptions-item__label.is-bordered-label {
    background: #f9fafc;
  }
  
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
  ::v-deep .el-select {
    width: 100%;
  
  }
  ::v-deep .el-input__inner {
    height:32px;
    line-height: 32px;
    font-size: 12px !important;
  
  }
  
  </style>
  